<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios的get请求</title>
    <!--1.引入外部的vue.js文件-->
    <script src="./js/vue@3.5.12.global.js"></script>
    <script src="./js/axios.js"></script>
</head>
<body>
<!--2.视图-->
    <div id="app">
        <!--如果函数不需要传参，可以不写小括号-->
        <button @click="getUsers">使用get请求从远程获取数据</button>

    </div>
</body>
<script>
    //3.创建Vue实例
    const app = Vue.createApp({
        //model:放数据的地方
        data(){
            return {
                users:[],// 空的用户数组
                name: 'admin',
                age: 18,
                gender: 1,
            }
        },
        methods:{
            //获取数据的函数
            getUsers(){
                //1.发送get请求:简单的参数：比如只有一个参数，直接使用问号传参就可以了
                /*axios.get('/api/user?name='+this.name) //url
                    .then(resp=>{
                        //执行成功
                        console.log(resp)
                    })
                    .catch(error=>{
                        console.log(error)
                    })*/
                //2.get请求传递多个参数：需要使用axios的params传参
                axios.get('/api/user',{
                    //使用params可以传递多个参数
                    params:{
                        name: this.name,
                        age: this.age,
                        gender: this.gender
                    },
                    //请求头：报文
                    headers:{
                        //后端会使用JWT技术加密身份信息（授权），传递给前端，前端每次请求时，都会带上这个身份传递给后端
                        // 后端获取到这个身份后，就会使用JWT解析鉴权
                        'Authorization': '1234567890-abcde-asfahfdghfj',
                    }
                }) //url
                    .then(resp=>{
                        //执行成功
                        console.log(resp)
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            }
        }
    })
    //4.挂载:将数据渲染到指定的视图位置
    app.mount('#app');
</script>
</html>